<template>
    <div id="wangeditor">
        <div ref="editorElem" style="text-align:left;"></div>
    </div>
</template>
<script>
    import E from "wangeditor";

    export default {
        props: ['value'],
        data() {
            return {
                editor: null,
                editorContent: '',
                isInput: false
            }
        },
        watch: {
            value(val) {
                if (!this.isInput) {
                    // this.content = val;
                    this.editor.txt.html(val)
                }
            }
        },
        mounted() {
            this.editor = new E(this.$refs.editorElem);
            // 编辑器的事件，每次改变会获取其html内容
            this.editor.customConfig.onchange = html => {
                console.log(html)
                this.isInput = true;
                this.$emit('edit-out', html);
                // this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
            };
            this.editor.customConfig.menus = [
                // 菜单配置
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ];
            // 设置超时时间
            this.editor.customConfig.uploadImgTimeout = 1000000;
            // 上传图片时发生错误的提示
            this.editor.customConfig.customAlert = (info) => {
                // info 是需要提示的内容
                this.$Notice.error({
                    title: '上传图片报错',
                    desc: info,
                    duration: 0
                });
            }
            // this.editor.customConfig.uploadFileName = 'file'
            // 上传图片的地址
            // this.editor.customConfig.uploadImgServer = this.$uploadURL;
            // this.editor.customConfig.uploadImgHeaders = {
            //     token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
            // }
            // 自定义图片上传
            this.editor.customConfig.customUploadImg = async (files, insert) => {
                // console.log(files)
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后，插入到编辑器的方法
                // 上传代码返回结果之后，将图片插入到编辑器中
                // insert(imgUrl)

                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append("file", files[i]);
                    let data = await this.uploadImage(formData);
                    insert(data.data)
                }
            }
            this.editor.create(); // 创建富文本实例
        },
        methods:{
            uploadImage(formData){
                let cc = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                return new Promise((resolve, reject) => {
                    this.axios.post(this.$uploadURL, formData, cc).then(res => {
                        resolve(res)
                    })
                });
            }
        }
    };
</script>
<style scoped>
</style>